<template>
    <div class="category">
        <div style="height: 80px">
            <div>
                <el-autocomplete style="margin-top: 20px;margin-left: -1040px"
                                 class="inline-input"
                                 v-model="select" hide-loading=true
                                 placeholder="请输入名称关键字">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-autocomplete> <el-button  @click="getSelect()" icon="el-icon-search" circle></el-button>
            </div>
            <div style="height:40px;margin-top: -40px">
                <el-button style="margin-right: -1000px;" @click="addCategory()" type="primary" round>添加种类</el-button>
            </div>
        </div>
        <el-table :data="pagination.records" border :header-cell-style="{background : 'rgba(72,121,129,0.38)'}">
            <el-table-column fixed="left" prop="categoryName" label="种类名" width="400"></el-table-column>
            <!--要进行的操作-->
            <el-table-column fixed="right" label="操作" width="470">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row.categoryId,'view')" type="info" icon="el-icon-view" size="small"
                               round></el-button><!--详情查看-->
                    <el-button @click="edit(scope.row.categoryId,'edit')" type="info" icon="el-icon-edit" size="small"
                               round></el-button><!--详情-->
                    <el-button @click="deleteRecord(scope.row.categoryId)" type="danger" icon="el-icon-delete"
                               size="small" round></el-button><!--删除-->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.current"
                :page-sizes="[7, 10, 15, 20]"
                :page-size="pagination.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total" class="page">
        </el-pagination>
        <!-- 编辑属性显示框-->
        <el-dialog
                :title="form[kindId].propertyCategory.categoryName"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="handleClose">
            <section class="update">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="种类编号">
                        <el-input disabled :value="kindId+1" style="margin-left:-380px;width: 120px"></el-input><!--这里不能用v-mode，否则kindId加1报错，而用v-bind就可以加1-->
                    </el-form-item>
                    <el-form-item label="分类名称">
                        <el-input :disabled="viewFlag" v-model="form[kindId].propertyCategory.categoryName" style="margin-left:-340px;width: 160px"></el-input>
                    </el-form-item>
                    <el-form-item label="分类图片">
                        <div>
                        <el-image
                                style="width: 100px; height: 100px; margin-left: -400px; cursor:pointer"
                                :src="require('@/assets/img/categoryPictures/'+imageUrl)"
                                fit="contain">
                        </el-image>
                        </div>
                    </el-form-item>
                    <div style="margin-top: 20px">-----------    属性列表    -----------
                    <div v-for="(property,index) in form" style="margin-left: 10px;margin-top: 10px"><!--让属性列表脱离文档流-->
                        <el-input :disabled="viewFlag"  v-model="property.propertyName" style="float: left;width: 120px;margin-left: 15px;margin-top: 15px"></el-input>
                    </div>
                    </div>

                </el-form>
            </section>
            <span slot="footer" class="dialog-footer"  >
        <el-button :disabled="viewFlag" @click="dialogVisible = false"style="margin-top: 30px">取 消</el-button> <!--把间隔设置好才美观-->
        <el-button :disabled="viewFlag"  type="primary" @click="submit()">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'Category',
        data() {
            return {
                select:'',
                viewFlag:false,  //点击查看按钮禁用
                imageUrl:'0b341c64-eaab-4e63-a518-758fa969c36d.jpg',//选中种类的图片url
                kindId:0,//传进来的categoryId-1,就变成了属性数组的下标。数组下标从0开始，而数据库id从1开始。下标设为0因为设为null页面初始化没有数据显示
                //选中的种类的属性是个数组，数组里有多个对象，对象里还嵌套一个对象。其中我没写的属性与那多个其他的对象会自动帮我填充的，我只需要写一些它识别不了的复杂属性就可
                form: [{propertyName:"",propertyCategory:{categoryImageSrc:""}}],
                pagination: { //分页后的产品信息
                    current: 1, //当前页
                    total: null, //记录条数
                    size: 7,//每页条数
                    records: []  //当前页面的数据
                },
                dialogVisible: false  //如果为true就显示编辑框
            }
        },
        created() {
            this.getCategoryInfo()
        },
        methods: {
            edit(categoryId,flag) { //编辑产品
                this.dialogVisible = true;
                this.$axios(`/api/property/${categoryId}`).then(res => { //根据id请求后台
                    console.log("该种类的具体属性",res.data)
                    if (res.data != null && res.data != "") {
                        this.kindId = categoryId-1;
                        this.form = res.data;
                        this.viewFlag = flag == 'view' ? true : false;
                        this.imageUrl = this.form[categoryId].propertyCategory.categoryImageSrc;
                        console.log("图片路径",this.imageUrl)
                    }
                })
            },
            getSelect(){
                this.$axios.get(`/api/categoryByName/${this.select}/${this.pagination.current}/${this.pagination.size}`).then(res =>{
                    if (res.data != null && res.data != ''){
                        this.pagination = res.data
                    }else {
                        this.$confirm('未查找到相关数据','查询提示',{
                            confirmButtonText: '好吧',
                            type : "warning"
                        }).then(() => {
                        })
                    }
                })
            },
            handleClose(done) { //关闭提醒
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    }).catch(_ => {
                });
            },
            submit() { //提交修改后的属性信息
                this.dialogVisible = false
                this.$axios({
                    url: '/api/property',
                    method: 'put',
                    data: {
                        ...this.form
                    }
                }).then(res => {
                    console.log("返回什么",res)
                    if (res.data ==1) {          //只有data返回1时成功
                        this.$message({ //成功修改提示
                            showClose: true,  //设置手动关闭
                            center: true,//内容居中
                            message: '更新成功',
                            type: 'success'
                        })
                    }else {
                        this.$message({   //弹出错误框
                            showClose: true,
                            type: "error",
                            message: "更新失败！",
                            center: true //内容居中
                        });
                    }
                }).catch(res => {                           //服务器出现异常
                    this.$message({   //弹出错误框
                        showClose: true,
                        type: "error",
                        message: "更新失败！",
                        center: true //内容居中
                    });
                })
            },
            deleteRecord(categoryId) {
                this.$confirm("确定删除该记录吗,该操作不可逆！！！", "删除提示", {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '算了,留着',
                    type: 'danger'
                }).then(() => { //确认删除
                    this.$axios({
                        url: `/api/category/${categoryId}`,
                        method: 'delete',
                    }).then(res => {
                        if (res.data ==1) {        //只有data返回1时删除成功
                            this.getCategoryInfo()
                            this.$message({   //弹出成功框
                                showClose: true,
                                type: "success",
                                message: "删除成功",
                                center: true //内容居中
                            });
                        }else {      //更新失败
                            this.$message({   //弹出错误框
                                showClose: true,
                                type: "error",
                                message: "删除失败！",
                                center: true //内容居中
                            });
                        }
                    }).catch(res => {                           //服务器报错
                        this.$message({   //弹出错误框
                            showClose: true,
                            type: "error",
                            message: "删除失败！",
                            center: true //内容居中
                        });
                    })
                })
            },
            getCategoryInfo() { //
                this.$axios(`/api/category/${this.pagination.current}/${this.pagination.size}`).then(res => {
                    console.log("返回的对象", res)
                    this.pagination = res.data
                    console.log("返回的页面数据", this.pagination.records)
                }).catch(error => {
                })
            },
            //改变当前记录条数
            handleSizeChange(val) {
                this.pagination.size = val
                this.getCategoryInfo()
            },
            //改变当前页码，重新发送请求
            handleCurrentChange(val) {
                this.pagination.current = val
                this.getCategoryInfo()
            },
        },
    };
</script>
<style lang="scss" scoped>
    .category {
        padding: 0px 40px;

    .page {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .propertyOuterBox{  /*属性列表设置*/
        /*display: flex;*/

    }

    .edit {
        margin-left: 20px;
    }

    }
</style>

